{#include header/}

<h2>New Visit</h2>

<b>Pet</b>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Birth Date</th>
            <th>Type</th>
            <th>Owner</th>
        </tr>
    </thead>
    <tr>
        <td>{pet.name}</td>
        <td>{pet.birthDate}</td>
        <td>{pet.type.name}</td>
        <td>{owner.firstName} {owner.lastName}</td>
    </tr>
</table>

<form class="form-horizontal" method="post" action="addVisit?ownerId={owner.id}&petId={pet.id}" enctype="multipart/form-data">
<div class="form-group has-feedback">
    <div class="form-group">
        <label class="col-sm-2 control-label">Date</label>
        <div class="col-sm-10">
            <div>
                <input class="form-control" type="text" placeholder="YYYY-MM-DD" title="Enter a date in this format: YYYY-MM-DD"
                    min="1997-01-01" max="2030-12-31" id="date" name="date" value=""/>
            </div>
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Description</label>
        <div class="col-sm-10">
            <div>
                <input class="form-control" type="text" id="description" name="description" value="" />
            </div>
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <input type="hidden" name="petId" value="8" />
        <button class="btn btn-default" type="submit">Add Visit</button>
    </div>
</div>
</form>

<br />
<b>Previous Visits</b>
<table class="table table-striped">
    <tr>
        <th>Date</th>
        <th>Description</th>
    </tr>
    {#if pet.visits != null}
        {#for visit in pet.visits} 
        <tr>
            <td>{visit.date}</td>
            <td>{visit.description}</td>
        </tr>
        {/for}
    {/if}
</table>

<script>document.getElementById("date").value = new Date().toJSON().slice(0,10)</script>

{#include footer/}